<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>服务列表</title>
  <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
</head>
<body>

<table id="staff" lay-filter="test"></table>

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script th:src="@{/layui/layui.js}"></script>

<script th:inline="none">
  layui.table.render({
    elem: '#staff'
    ,url: '/staff/staffList.do' //数据接口
    ,page: true //开启分页
    ,cols: [[ //表头
      {field: 'staffId', title: '员工ID', width:80, sort: true}
      ,{field: 'staffName', title: '姓名', width:120, sort: true}
      ,{field: 'staffLevel', title: '职位', width:120, sort: true}
      ,{field: 'staffSex', title: '性别', width: 120, sort: true}
      ,{field: 'storeId', title: '店铺ID', width: 120, sort: true}
      ,{field: 'staffUrl', title: '图片', width: 120, templet:'<div><img onClick="showBig(this)" src="{{d.staffUrl}}" width="100%" height="60" /></div>'}
      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
    ]]
  });
  function showBig(obj) {
    //示范一个公告层
    layui.layer.open({
      type: 1
      ,title: false //不显示标题栏
      ,closeBtn: false
      ,area: '300px;'
      ,shade: 0
      ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
      ,btn: ['关闭']
      ,btnAlign: 'c'
      ,moveType: 1 //拖拽模式，0或者1
      ,content: '<div><img src="'+obj.src+'" style="width: 100%"/></div>'
      ,success: function (layero) {

      }
    });
  }

  var $ = layui.jquery;

  layui.table.on('tool(test)', function(obj){
    var data = obj.data;
    //console.log(obj)
    if(obj.event === 'del'){
      layer.confirm('确定删除该行?', function(index){

        $.ajax({
          method:'post',
          url:'/staff/delete.do?id='+data.staffId,
          dataType:'json',
          success:function (rs) {
            if (rs.code==200) {
              layui.layer.msg("删除成功");
              layui.table.reload('staff', {
                page: {
                  page: 1 //重新从第 1 页开始
                }
              });
            }else {
              layui.layer.msg("删除失败");
            }
          }
        })
        layer.close(index);
      });
    } else if(obj.event === 'edit'){
      layer.prompt({
        formType: 2
        ,value: data.email
      }, function(value, index){
        obj.update({
          email: value
        });
        layer.close(index);
      });
    }
  });
</script>
</body>
</html>